본문 바로가기

css관련기록

image sprite로 제작되는 부분

image sprite

이미지



<style>
.QA{float:left; padding:7px 0 0 5px; position:relative;}

.crrowbtn a{display:inline-block; background:url(../images/main_icon.png) -350px -290px no-repeat; width:14px; height:14px;}

a.crrowbtn2{display:inline-block; background:url(../images/main_icon.png) -364px -290px no-repeat; width:14px; height:14px;}
</style>

<div class="QA">
   <ul>
    <li class="crrowbtn"><a href="#"><span class="blind">앞으로가기</span></a><a href="#" class="crrowbtn2"><span class="blind">뒤로 가기</span></a></li>
   </ul>
  </div>

------------------------------------------------------------------
네이버 버튼 부분 온 오프 아웃  마우스 효과

마우스 이미지를 효과별로 만들어서 따로 지정해서 넣는다


<form name="search" method="get" action="#" class="search">
   <fieldset>
    <legend>검색버튼</legend>
    <input class="sBtn" type="image" src="images/btn_sch.gif" alt="검색"

onmouseover="this.src='images/btn_sch_over.gif'"
onmousedown="this.src='images/btn_sch_down.gif'"
onmouseout="this.src='images/btn_sch.gif'"
 />
   </fieldset>